<template>
	<div class="404 content">
		<img src="../assets/404_03.png" alt="404" class="pic" />
		<div class="main">
			<div class="title">404</div>
			<div class="tip">对不起，您访问的页面暂时没有找到</div>
			<div class="tip">您可能输入了错误的网址，或者该网站已经删除或移动</div>
			<div class="button" @click="$router.replace('/home')">返回首页</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "404",
	props: {},
	data() {
		return {}
	},
	computed: {},
	methods: {},
	components: {},
}
</script>

<style lang="scss" scoped>
.content {
	display: flex;
	justify-content: center;
	align-items: center;
	width: min-content;
	margin: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	.pic {
		width: 400px;
		display: block;
	}
	.main {
		padding-left: 40px;
		white-space: nowrap;
		.title {
			font-size: 100px;
			margin-bottom: 20px;
		}
		.tip {
			color: #999;
			font-size: 26px;
			margin-bottom: 7px;
		}
		.button {
			background: #409eff;
			color: #fff;
			text-align: center;
			border-radius: 1000px;
			padding: 10px 25px;
			display: inline-block;
			margin-top: 30px;
			cursor: pointer;
		}
	}
	@media (max-width: 1080px) {
		display: block;
		width: 100%;
		.pic {
			margin: auto;
		}
		.main {
			width: min-content;
			padding: 0;
			.title {
				font-size: 20vw;
			}
			.tip {
				font-size: 3vw;
			}
		}
	}
}
</style>
